<template>
  <div class="HeaderCellComp" @click="handleClick">
    <button @click.stop="headerClick(index, label, column)">
      {{ label + ':' + index }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'HeaderCellComp',
  props: {
    // 列索引值
    index: {
      type: Number,
    },
    // 列名
    label: {
      type: String,
    },
    // 列定义
    column: {
      type: Object,
    },
  },
  methods: {
    // 调试用
    headerClick(index, label, column) {
      console.log('01: header-click', index, label, column)
      this.$emit('header-click', index, label, column)
    },
    handleClick() {
      console.log('head-comp:click', this.$props)
    },
  },
  created() {
    console.log('head-comp: created')
  },
}
</script>

<style scoped>
.HeaderCellComp {
  border: 1px solid green;
}
</style>
